<template>
  <div class="container">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.pingjiaStatus" class="select">
          <template #prefix>
            <div class="select-prefix">处理状态：</div>
          </template>
          <el-option v-for="item in TypeList" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

        <el-date-picker v-model="dateRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="right">
        <el-button class="query" @click="getPingJiaPage">查询</el-button>
        <el-button plain class="clear" @click="clearAll">清空</el-button>
      </div>
    </div>
    <div class="content">
      <div class="table-header">
        <span class="left">列表</span>
        <div class="right">
          <!-- <el-button type="primary" icon="el-icon-download" class="export" @click="exportExcel"
            :loading="exportLoading">批量处理</el-button> -->
          <el-button icon="el-icon-refresh-right" class="refresh" @click="getPingJiaPage">刷新</el-button>
        </div>
      </div>
      <el-table :data="tableData" :header-cell-style="headerCellStyle" style="width: 100%" :loading="tableLoading">
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="jignquName" label="所属景区" align="center" />
        <el-table-column prop="menpiaoCategory" label="门票类型" align="center" />
        <el-table-column label="评价内容" align="center" width="200">
          <template slot-scope="scope">
            <el-tooltip effect="light" :content="scope.row.pingjiaContent" placement="bottom">
              <span>{{ scope.row.pingjiaContent ? scope.row.pingjiaContent.substring(0, 20) + '...' : '--' }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="星级" align="center">
          <template slot-scope="scope">
            <el-rate v-model="scope.row.pingjiaScore" disabled text-color="#ff9900"></el-rate>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center" width="360">
          <template slot-scope="scope">
            <div v-if="scope.row.pingjiaPictureUrl">
              <el-image v-for="(i, index) in  scope.row.pingjiaPictureUrl" :key="index"
                style="width: 80px; height: 80px;margin-right: 6px;" :src="i"
                :preview-src-list="scope.row.pingjiaPictureUrl">
              </el-image>
            </div>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pingjiaStatus == 0">
              <i class="el-icon-loading"></i>待审核
            </el-tag>
            <el-tag v-if="scope.row.pingjiaStatus == 1">
              <i class="el-icon-success"></i>已通过
            </el-tag>
            <el-tag type="warning" v-if="scope.row.pingjiaStatus == 2">
              <i class="el-icon-error"></i>未通过
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="审核人" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.pingjiaStatus != 0">{{ scope.row.updateBy }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.pingjiaStatus != 0">{{ conversionTime(scope.row.pingjiaExamineTime) }}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-link v-if="scope.row.pingjiaStatus != 1" type="primary" class="look" @click="showPingjia(scope.row, 1)"
              style="margin-right: 4px">展示</el-link>
            <el-link v-if="scope.row.pingjiaStatus != 2" type="warning" style="margin-right: 4px"
              @click="showPingjia(scope.row, 2)">屏蔽</el-link>
            <el-link type="danger" style="margin-right: 4px" @click="handleDelete(scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getPingJiaPage" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  jingquExportApi, // 导出景区
  jingQuListApi, // 获取所有景区列表
} from "@/api/YApi/scenicSpot";

import {
  pingjiaListApi,
  delPingjiaApi,
  examinePingjiaApi, // 审核评价
} from "@/api/YApi/evaluate";
export default {
  data() {
    return {
      jingquList: [],
      tableLoading: false,
      exportLoading: false,
      total: 0,
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        pingjiaStatus: null, // 状态(0开放 1关闭)
      },
      // 新增
      isShowAdd: false,

      TypeList: [
        { label: "全部", value: null },
        { label: "待审核", value: "0" },
        { label: "开放", value: "1" },
        { label: "关闭", value: "2" },
      ],
      searchText: "",
      tableData: [],
      currentPage: 1,
    };
  },
  computed: {
    headerCellStyle() {
      return {
        "font-size": "16px",
        "font-weight": 400,
        color: "#999999",
        background: "#fff",
      };
    },
  },
  methods: {
    // 转换时间
    conversionTime(time) {
      const date = new Date(time);

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    // 展示评价
    showPingjia(item, state) {
      console.log(item);
      examinePingjiaApi({ pingjiaId: item.pingjiaId, pingjiaStatus: state })
        .then((res) => {
          console.log(res)
          if (res.code === 200) {
            this.msgSuccess("设置成功");
            this.getPingJiaPage();
          } else {
            this.msgError("设置失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.msgError("设置失败");
        })
    },

    getName(id) {
      for (let i = 0; i < this.jingquList.length; i++) {
        if (this.jingquList[i].jingquId == id) {
          return this.jingquList[i].jingquName;
        }
      }
    },
    // 获取所有景区
    getjingQuList() {
      jingQuListApi().then((res) => {
        this.jingquList = res.data;
      });
    },
    // 清空
    clearAll() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        startTime: null,
        endTime: null,
        pingjiaStatus: null, // 状态(0开放 1关闭)
      };
      this.dateRange = [];
      this.getPingJiaPage();
    },

    // 删除
    handleDelete(row) {
      const id = row.jingquId;
      this.$confirm("是否确认删除该条评价?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delPingjiaApi(id);
        })
        .then((res) => {
          if (res.code === 200) {
            this.msgSuccess("删除成功");
            this.getPingJiaPage();
          } else {
            this.msgError("删除失败");
          }
        })
        .catch((err) => {
          console.log(err);
          this.msgError("删除失败");
        });
    },

    // 导出景区
    exportExcel() {
      this.exportLoading = true;
      let { startTime, endTime, status } = { ...this.queryParams };
      jingquExportApi({ startTime, endTime, status })
        .then((res) => {
          console.log(res);
          if (res.code === 200 && res.data) {
            const link = document.createElement("a");
            link.href = res.data;
            link.download = "file-name.ext";
            link.click();
          }
          this.exportLoading = false;
        })
        .catch((err) => {
          console.log(err);
          this.exportLoading = false;
        });
    },

    // 获取景区列表
    getPingJiaPage() {
      this.tableLoading = true;
      let self = this;
      console.log(this.dateRange);
      if (this.dateRange.length) {
        this.queryParams.startTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
      }
      pingjiaListApi(this.queryParams)
        .then((res) => {
          if (res.code === 200) {
            this.total = res.total;
            this.tableData = res.rows;
            this.tableData.forEach((v) => {
              if (v.pingjiaPictureUrl && v.pingjiaPictureUrl.length) {
                v.pingjiaPictureUrl = v.pingjiaPictureUrl.split(",");
              }
              v.jignquName = self.getName(v.jingquId)
            });

            this.tableLoading = false;
          } else {
            this.tableData = [];
            this.tableLoading = false;
          }
        })
        .catch((err) => {
          console.log(err);
          this.tableData = [];
          this.tableLoading = false;
        });
    },

    handleSizeChange() { },
    handleCurrentChange() { },
  },
  created() {
  },
  mounted() {
    this.getjingQuList();
    setTimeout(() => {
      this.getPingJiaPage();
    }, 500);
  },
};
</script>
<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  background-color: var(--theme_bg_color);
  display: flex;
  flex-direction: column;

  .header {
    height: 80px;
    background: #ffffff;
    border-radius: 8px 8px 8px 8px;
    padding: 24px;
    margin-bottom: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;

      .select {
        height: 32px;
        width: 154px;
        margin-right: 16px;

        ::v-deep .el-input--prefix .el-input__inner {
          padding-left: 81px;
        }
      }

      .select-prefix {
        font-size: 14px;
        font-weight: 400;
        color: #8f959e;
        line-height: 36px;
      }

      .search {
        height: 32px;
        width: 338px;
      }
    }

    .right {
      display: flex;
      align-items: center;

      .query {
        width: 72px;
        height: 32px;
        border: 1px solid #3370ff;
        color: #3370ff;
      }

      .clear {
        width: 72px;
        height: 32px;
      }
    }
  }

  .content {
    flex: 1;
    background: #fff;

    .table-header {
      padding: 21px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e7ed;

      .left {
        font-size: 16px;
        font-weight: 400;
        color: #111111;
      }

      .right {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .add {
          background: #3370ff;
          border: none;
        }

        .export {
          background: #79cf1c;
          border: none;
        }
      }
    }

    .pagination {
      display: flex;
      justify-content: flex-end;
      margin-top: 20px;
    }

    .edit {
      margin: 0 20px;
    }

    .tag {
      width: 60px;
      height: 24px;
      border-radius: 2px 2px 2px 2px;
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;

      i {
        margin-right: 5px;
      }
    }

    .business {
      background: #d6e2ff;
      color: #245bdb;
    }
  }
}
</style>
